<script setup>
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { computed } from 'vue'
import { format } from 'date-fns'
//输入框
const title =ref('')
const department=ref('')
// 日期选择器
const size = ref('default')
const modifiedTime = ref('')
const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]
const disabledDate = time => {
  return time.getTime() > Date.now()
}//日期选择器截至

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(3)//每页条数
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  getAllAnnouncement();
pageSize.value = size
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  getAllAnnouncement();
pageNum.value = num
}//分页模型结束

//定义返回列表数据
const announcement = ref([])

//获取公告列表数据
import {getAllAnnouncementService} from '@/api/AnnouncementAll.js'

//绑定查询函数
const getAllAnnouncement=async()=>{
    let params={
        page: pageNum.value,
        pageSize: pageSize.value,
        title:title.value?title.value:'',
        department:department.value?department.value:'',
        modifiedTime:modifiedTime.value ? format(modifiedTime.value, 'yyyy-MM-dd') : ''
    }
    let result= await getAllAnnouncementService(params)
    announcement.value=result.data.records
     total.value=result.data.total

}
//调用函数
getAllAnnouncement();

//查询按钮生效
const searchAnnouncement=async()=>{
    getAllAnnouncement();
}

//跳转到公告详情
const router = useRouter();
const handleRowClick = (row) => {
      // 使用 router.push 进行页面跳转
      // 假设您要跳转到的页面路径是 '/details'，并且希望传递行的 ID
      router.push({ path: '/details',query: { id: row.id } });
    };
</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>公告查询</span>
            </div>
           <!-- 日期选择器 -->
           <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration">选择日期</span>
      <el-date-picker
        v-model="modifiedTime"
        type="date"
        placeholder="请选择时间"
        :size="size"
      />
    </div>
</div>
        <!--搜索栏  -->
        <div class="demo-input-size">
    <el-input
      v-model="title"
      class="custom-width "
      size="large"
      placeholder="公告名称"
     
    />
    <el-input
      v-model="department"
      class="custom-width "
      size="large"
      placeholder="院系"
      
    />
    <!-- 按钮 -->
    <div class="flex">
        <el-button type="primary" :icon="Search" @click="searchAnnouncement()">查询</el-button>
      </div>
  </div>
        
        
        </template>
        <el-table :data="announcement" style="width: 100%" @row-click="handleRowClick">
            <el-table-column label="公告名称" prop="title"></el-table-column>
            <el-table-column label="发布时间" prop="modifiedTime"></el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>

        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
        layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
        @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    </el-card>
</template>
<style lang="scss" scoped>
//日期选择器

.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
//输入框样式
.demo-input-size {
  display: flex;
  justify-content: space-between; /* 两个项目之间留有空间 */
  align-items: center; /* 项目在垂直方向上居中对齐 */
}
.custom-width {
  flex-grow: 1; /* 允许输入框在必要时扩展填充可用空间 */
  width: 50px;/* 或者根据需要进行调整 */
}
</style>